<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item
      v-for="(value, key) in groupByModules"
      :key="key"
      :title="key"
      :name="key"
    >
      <LibraryItem
        v-for="material in value"
        :key="material.package"
        :material="material"
      />
    </el-collapse-item>
  </el-collapse>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { groupBy } from "lodash-es"; // pnpm add @types/lodash-es -D
import { materialModules } from "@/materials";
import LibraryItem from "./components/library-item/index.vue";
/*
  将 materialModules 数据遍历展示，因为展示数据是分组展示，所以我们也需要对数据分组，才好展示
*/
// 对数据进行处理
const modules = Object.values(materialModules); // 提取对象所有属性值成一个数组
const groupByModules = groupBy(modules, "categoryName"); // 对数组按照categoryName属性进行分组

const activeNames = ref(Object.keys(groupByModules)); // 需要展示的collapse

defineOptions({
  name: "Library",
});
</script>

<style scoped lang="scss">
.el-collapse {
  border-top: none;
}

:deep() {
  .el-collapse-item__header {
    border-bottom: 1px solid #edeff3;
    padding-left: 10px;
  }

  .el-collapse-item__content {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 0;
  }
}
</style>
